<template>
	<view class="container">
		<!-- #ifdef MP -->
		<view class="custom" :style="{'background':navbg}">
			<uni-nav-bar :status-bar="true" :fixed="true" :title="tabName" color="#333333" left-icon="arrowleft" background-color="rgba(255,255,255,0)"
			 @click-left="back">

			</uni-nav-bar>
		</view>
		<!-- #endif -->
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<!-- <view class="titleNview-placing"></view> -->
			<!-- 背景色区域 -->
			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="preImg(item,carouselList)">
					<image :src="item" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				{{swiperCurrent+1}} / {{swiperLength}}

			</view>
		</view>
		<view style="position: relative;top: -10rpx;border-radius: 20rpx 20rpx 0 0;">
			
		
		<view class="introduce-section">
			<text class="title">{{infoData.goodsTitle}}</text>
			<view class="price-box">
				<text class="price" v-if="userInfo.member_type==1||userInfo.member_type==2">
					<text class="price-tip">¥</text>{{infoData.svip.min==undefined?'-': infoData.svip.min | money}} ~
					 <text class="price-tip">¥</text>{{infoData.svip.max==undefined?'-': infoData.svip.max | money}}
				 </text>
				<text class="price" v-else-if="userInfo.member_type==3">
					<text class="price-tip">¥</text>{{infoData.vip.min==undefined?'-': infoData.vip.min | money}} ~
					 <text class="price-tip">¥</text>{{infoData.vip.max==undefined?'-': infoData.vip.max | money}}
				</text>
				<text class="price" v-else>
					<text class="price-tip">¥</text>{{infoData.sale.min==undefined?'-': infoData.sale.min | money}} ~ 
					 <text class="price-tip">¥</text>{{infoData.sale.max==undefined?'-': infoData.sale.max | money}}
				</text>
				<view class="share-btn">
					<image src="../../static/home/product/share.png" mode="widthFix"></image>
					<text class="colorfont font24"> 分享</text>
				</view>
			</view>
			<view class="bot-row">
				<text>销量: {{infoData.package_sale==undefined?'-': infoData.package_sale}}</text>
				<text>库存: {{infoData.package_stock==undefined?'-': infoData.package_stock}}</text>
				<text>运费：{{infoData.express_price==0?'免运费':infoData.express_price | money}}</text>
			</view>
		</view>

		<view class="c-list">
			<view class="c-row b-b" @click="guige()">
				<text class="tit">规格</text>
				<view class="con">
					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
						{{sItem}}
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>七天无理由退换货 · 到店自提 · 认证企业</text>
				</view>
			</view>
		</view>

		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header" @click="clickRateList(infoData.id,storeInfoData.cid)">
				<text class="tit">商品评价</text>
				<text>({{infoData.comment_info.total}})</text>
				<text class="tip">好评率 {{infoData.good_evaluate_rate=='100.00'?'100':infoData.good_evaluate_rate}}%</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="eva-box">
				<view class="eva-top">
					<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<text class="name">Leo yo</text>
				</view>

				<view class="bom">
					<text class="con">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
					<view class="bot">
						<image src="../../static/errorImage.jpg"></image>
						<image src="../../static/errorImage.jpg"></image>
						<image src="../../static/errorImage.jpg"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="eva-section">
			<view class="e-header" @click="navTo('storeList')">
				<text class="tit" >店铺</text>
				<text class="tip update">进店逛逛</text>
				<text class="yticon icon-you" style="color: #FF5E00;"></text>
			</view>
			<view class="store-area"  >
				<image :src="storeInfoData.shop_logo" @click="navTo('storeList')"></image>
				<view class="store-info" @click="navTo('storeList')">
					<view class="font28 colorfont">{{storeInfoData.shop_name}}</view>
					<view class="font20 color999" style="margin-top: 10upx;">{{storeInfoData.follow||0}}人关注</view>
				</view>
				<view class="attention" v-if="storeInfoData.is_follow==0" @click="guanZhu(0)">关注店铺</view>
				<view class="attention2" v-else @click="guanZhu(1)">正在关注</view>
			</view>
		</view>
		<view class="detail-desc">
			<view class="d-header">
				<text>商品详情</text>
			</view>
			<rich-text :nodes="goodsContent"></rich-text>
			<view class="font24 color999" style="text-align: center;margin: 30rpx 0;">
				到底啦，想买就赶紧入手吧～
			</view>
		</view>
		<view class="sale-null" v-if="infoData.status==0">
			该商品已下架，去看看其他好货吧～
		</view>
		<view class="sale-null" v-if="infoData.package_stock==0">
			该商品已售空，去看看其他好货吧～
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view  class="p-b-btn"  @click="navTo('storeList')">
				<image src="../../static/home/product/store.png" mode="widthFix"></image>
				<text>店铺</text>
			</view>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<image src="../../static/home/product/shopcar.png" mode="widthFix"></image>
				<text>购物车</text>
			</navigator>
			<view class="p-b-btn" :class="infoData.is_follow==1?'active':''" @click="toFavorite(infoData.is_follow)">
				<image src="../../static/home/product/love.png" mode="widthFix"></image>
				<text>收藏</text>
			</view>

			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="clickBomBtn('car')">加入购物车</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="clickBomBtn('buy')">立即购买</button>
			</view>
		</view>

		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image class="product" :src="goodsPicChoose"></image>
					<view class="right">
						<text class="price">¥{{chooseGoodsPrice}}</text>
						<text class="stock color999">库存：{{infoData.package_stock}}件</text>
						<view class="selected color999">
							请选择：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem}}
							</text>
						</view>
						<image src="../../static/useCenter/delete-img.png" class="delete-img" @click="clickDelete"></image>
					</view>
				</view>
				<view v-for='(ProductItem,n) in simulatedDATA.specifications' :key="n" class="attr-list">
					<text class="font-back">{{ProductItem.name}}</text>
					<view class="item-list">
						<text v-for='(oItem,index) in ProductItem.children' :key="index" class="tit" :class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'selected':'']"
						 @click="specificationBtn(oItem.label,n,$event,index,oItem.key)">
							{{oItem.label}}
						</text>
					</view>

				</view>
				<view class="number">
					<text class="font36 colorfont font-back" style="height: 50upx;display: inline-block;">数量</text>
					<view class="number-right">
						<text class="reduce active" @tap.stop="sub()">-</text>
						<text class="font36 colorfont">{{goodsNumber}}</text>
						<text class="add" @tap.stop="add()">+</text>
					</view>
				</view>
				<view class="btns" style="display: flex;">
					<button class="btn" @click="clickMask('car')" v-if="btnStatus==0||btnStatus==2">查看详情</button>
					<button class="btn" @click="clickMask('buy')" v-if="btnStatus==1||btnStatus==2">确定</button>
				</view>
				
			</view>
		</view>
		<!-- 分享 -->
		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
	</view>
</template>

<script>
	import share from '@/components/share';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import {
		ungzip,
		gzip,
		loadUserInfo,
		money,
		formatRichText
	} from '@/common/util'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			share,
			uniNavBar,
			uniIcon
		},

		data() {
			return {
				specClass: 'none',
				specSelected: ['请选择颜色', '尺码'],
				infoData: {}, //总信息数据
				storeInfoData: {}, //店铺信息
				favorite: false,
				shareList: [],
				swiperCurrent: 0, //轮播图个数
				swiperLength: 0, //轮播图个数
				carouselList: [], //轮播图
				navbg: 'rgba(255,255,255,0)', //导航栏颜色
				simulatedDATA: { // 模拟后台返回的数据 多规格
					'difference': [],
					'specifications': []
				},
				selectArr: [], // 存放被选中的值
				selectArrKey: [], // 存放被选中的值
				shopItemInfo: {}, // 存放要和选中的值进行匹配的数据
				subIndex: [], // 是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				goodsListIds:0,//选中得规格id
				goodsNumber: 1,
				goodsPicChoose: '', //选择规格变换图片
				goodsContent: '', //详情数据
				chooseGoodsPrice: '', //规格价格
				btnStatus:4,
				tabName:''
			};
		},
		//事件监听滚动条
		onPageScroll: function(Object) {
			var scrollTop = (Object.scrollTop) / 100;
			if(scrollTop>0.4){
				this.tabName = "商品详情"
			}else{
				this.tabName = "";
			}
			this.navbg = "rgba(255,255,255," + scrollTop + ")"
		},
		computed: {
			...mapState(['userInfo'])
		},
		async onLoad(options) {
			let id = options.id;
			this.loadDetailInfo(this, id);
		},
		methods: {
			// 加载详情信息
			loadDetailInfo(that, id) {
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: this.$requestApi.goodsInfo ,
						data: {
							goods_id:id
						}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							that.infoData = _data.result;
							that.goodsPicChoose = _data.result.goods_pic[0];
							that.storeInfoData = _data.result.shop_info;
							that.swiperLength = _data.result.goods_pic.length;
							that.carouselList = _data.result.goods_pic;
							that.simulatedDATA.difference = _data.result.goods_list;
							if (that.$store.state.userInfo.member_type == 1 || that.$store.state.userInfo.member_type == 2) {
								that.chooseGoodsPrice = money( _data.result.svip.min) + "~" + money(_data.result.svip.max);
							} else if (that.$store.state.userInfo.member_type == 3) {
								that.chooseGoodsPrice = money(_data.result.vip.min) + "~" + money(_data.result.vip.max);
							} else {
								that.chooseGoodsPrice = money(_data.result.sale.min) + "~" + money(_data.result.sale.max);
							}
							let ungzipRich = formatRichText(ungzip(_data.result.goods_content))
							that.goodsContent = ungzipRich;
							that.shopItemInfo = _data.result.goods_list
							// var specJsonArr = JSON.parse(_data.result.goodsInfoVo.specJson);
							// var arr1 =[];
							// var arr2 =[];
							// var arr3 =[];
							// for (var i in that.simulatedDATA.difference) {
							// 	var splitStr = (that.simulatedDATA.difference[i].specText).split('::');
							// 	var splitStrId = (that.simulatedDATA.difference[i].specKey).split('-');
							// 	that.shopItemInfo[splitStr.join(',')] = that.simulatedDATA.difference[i] // 修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
							// 	for(var j in splitStr){
							// 		if(specJsonArr.length>0){
							// 			let obj = {
							// 				name:splitStr[0],
							// 				id:splitStrId[0]
							// 			}
							// 			arr1.push(obj)
							// 		}
							// 		if(specJsonArr.length>1){
							// 			let obj = {
							// 				name:splitStr[1],
							// 				id:splitStrId[1]
							// 			}
							// 			arr2.push(obj)
							// 		}
							// 		if(specJsonArr.length>2){
							// 			let obj = {
							// 				name:splitStr[2],
							// 				id:splitStrId[2]
							// 			}
							// 			arr3.push(obj)
							// 		}
							// 	}
							// }
							// specJsonArr[0]['selectValue'] = that.unique(arr1);
							// specJsonArr[1]['selectValue'] = that.unique(arr2);
							
							if (_data.result.spec_json != '') {
								that.simulatedDATA.specifications = _data.result.spec_json;
							}
							
							that.checkItem()
						}
					})
			},
			unique(arr) {
				var obj = {};
				arr.forEach(item=>{
					obj[JSON.stringify(item)] = item;
				})
				arr = Object.keys(obj).map(data=>{
					return JSON.parse(data)
				})
				return arr
			},
			// 预览图片
			preImg(item, items) {
				// 预览图片
				uni.previewImage({
					current: item,
					urls: items,
					indicator: 'default',
					success: function(data) {
						console.log(data);
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				});
			
			},
			// 关注店铺
			guanZhu(type) {
				let that = this;
				let url = '';
				let cid = 0;
				if(type==0){
					that.storeInfoData.is_follow=1;
					url = that.$requestApi.attention;
					cid = that.infoData.cid;
				}else{
					that.storeInfoData.is_follow=0;
					url = that.$requestApi.cancleAttention;
					cid = [that.infoData.cid];
				}
				
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: url,
						data: {
							cid:cid
						}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							console.log('success')
						}
					})
			},
			/**
			 * @param {Object} url
			 * 跳转评价
			 */
			clickRateList(goodsId,cid){
				this.$Router.push({
					name: 'rateList',
					params: {goodsId:goodsId,cid:cid}
				});
			},
			navTo(url) {
				this.$Router.push({
					name: url,
					params: {shopId:this.storeInfoData.shopId}
				});
			},
			specificationBtn(item, n, event, index, key) {
				var that = this
				if (that.selectArr[n] !== item) {
					that.selectArrKey[n] = key;
					that.selectArr[n] = item;
					that.subIndex[n] = index;
				} else {
					that.selectArr[n] = '';
					that.selectArrKey[n] = '';
					that.subIndex[n] = -1; // 去掉选中的颜色
				}
				that.checkItem()
			},
			checkItem() {
				var that = this
				var option = that.simulatedDATA.specifications
				var result = [] // 定义数组存储被选中的值
				var resultKey = [] // 定义数组存储被选中的值
				for (let i in option) {
					result[i] = that.selectArr[i] ? that.selectArr[i] : ''
					resultKey[i] = that.selectArrKey[i] ? that.selectArrKey[i] : ''
				}
				for (let i in option) {
					var last = result[i] // 把选中的值存放到字符串last去
					var lastKey = resultKey[i] // 把选中的值存放到字符串last去
					for (let k in option[i].children) {
						result[i] = option[i].children[k].label; // 赋值，存在直接覆盖，不存在往里面添加name值
						resultKey[i] = option[i].children[k].key; // 赋值，存在直接覆盖，不存在往里面添加name值
						option[i].children[k].isShow = that.isMay(resultKey) // 在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last; // 还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
					resultKey[i] = lastKey; // 还原，目的是记录点下去  那个值，避免下一次执行循环时避免被覆盖
				}
				for(let i in that.simulatedDATA.difference){
					if (that.simulatedDATA.difference[i].spec_key == (that.selectArrKey).join('-')) {
						that.goodsPicChoose = that.simulatedDATA.difference[i].pic;
						that.chooseGoodsPrice = money(that.simulatedDATA.difference[i].sale_price);
						that.goodsListIds = that.simulatedDATA.difference[i].goods_list_id;
					}
				}
				if (result[0]=='') {
					that.specSelected = ['请选择颜色', '尺码']
				} else {
					that.specSelected = result
				}
				that.$forceUpdate() // 重绘
			},
			isMay(result) {
				for (var i in result) {
					if (result[i] === '' || result[i] === 'undefined') {
						return true // 如果数组里有为空的值，那直接返回true
					}
				}
				return this.shopItemInfo[result.join('-')] && Number(this.shopItemInfo[result.join('-')].package_stock) !== 0 // 匹配选中的数据的库存，若不为空返回true反之返回false
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			//减少数量
			sub() {
				if (this.goodsNumber <= 1) {
					return;
				}
				this.goodsNumber--;
			},
			//增加数量
			add() {
				this.goodsNumber++;
			},
			clickMask(type){
				if(this.subIndex.length==0){
					this.$api.msg('请选择规格');
					return
				}
				if (type == 'car') {
					this.$api.msg("功能暂未开发");
				} else if ('buy') {
					this.toggleSpec();
					const dataGoods = {
						list:[
							{
								goods_id: this.infoData.goods_id,
								goods_list_id:this.goodsListIds ,
								goods_total: this.goodsNumber,
								cid:this.infoData.cid
							}
						],
					}
					this.$Router.push({
						name: 'createOrder',
						params: {
							initParams:JSON.stringify(dataGoods) 
						}
					})
				}
			},
			clickDelete(){
				this.toggleSpec();
			},
			// 下方按钮点击
			clickBomBtn(type) {
				if (type == 'car') {
					this.btnStatus = 0;
					this.$api.msg("功能暂未开发");
				} else if ('buy') {
					this.btnStatus = 1;
					this.toggleSpec();
					// if (this.infoData.status == 0) {
					// 	this.$api.msg('该商品已下架');
					// 	return;
					// }
					// if (this.infoData.packageStock == this.infoData.packageSale) {
					// 	this.$api.msg('该商品已售空');
					// 	return;
					// }
				}
			},
			/**
			 * 规格
			 */
			guige(){
				this.btnStatus=2;
				this.toggleSpec();
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			back() {
				this.$Router.back(1)
			},
			//分享
			share() {
				this.$refs.share.toggleMask();
			},
			//收藏
			toFavorite(isFollow) {
				let that = this;
				let url = ''
				let goodsId = 0
				if(isFollow==0){
					that.infoData.is_follow = 1;
					url = that.$requestApi.collectGoods;
					goodsId=that.infoData.goods_id
				}else{
					that.infoData.is_follow = 0;
					url = that.$requestApi.cancelCollection;
					goodsId=[that.infoData.goods_id]
				}
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: url,
						data: {
							goods_id:goodsId
						}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							if(isFollow==0){
								that.$api.msg('收藏成功');
							}else{
								that.$api.msg('取消收藏');
							}
							
						}
					})
			},
			buy() {
				uni.navigateTo({
					url: `/pages/order/createOrder`
				})
			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 100upx;
	}

	.rich-text {
		padding: 0 30rpx;
	}

	.custom {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #D1D1D6;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 750upx;
			transition: .4s;
		}
	}

	.carousel {
		width: 100%;
		height: 750upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		right: 0;
		bottom: 60upx;
		width: 110upx;
		height: 50upx;
		align-items: center;
		justify-content: center;
		border-radius: 30upx 0 0 30upx;
		background-color: rgba(11, 14, 17, .4);
		font-size: 26rpx;
		color: #fff;
	}

	/* 标题简介 */
	
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;
		border-radius: 20rpx 20rpx 0 0;


		.title {
			font-size: 32upx;
			color: #0B0E11;
			font-weight: bold;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;

		}

		.share-btn {
			position: absolute;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(245, 245, 250, 1);
			border-radius: 60px 0px 0px 60px;
			height: 60upx;
			width: 150upx;
			padding-left: 10upx;
		}

		.share-btn image {
			width: 35upx;
			height: auto;
			margin-right: 10upx;
		}

		.price {
			font-size:48upx;
			font-weight: bold;
			color: #FF3A00;
			.price-tip {
				font-size: 28upx;
			}
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			justify-content: space-between;
			color: $font-color-light;
			margin-top: 30upx;
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		/* .share-btn{
			flex: 1;
			text-align:right;
			font-size: $font-sm;
			color: $uni-color-primary;
		} */
		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		margin: 20upx 35upx 0;
		font-size: $font-sm + 4upx;
		background: #fff;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.04);
		border-radius: 16upx;

		.c-row {
			display: flex;
			align-items: center;
			padding: 35upx 30upx;
			position: relative;
		}

		.tit {
			width: 80upx;
			color: #8E8E93;
		}

		.con {
			flex: 1;
			color: #0B0E11;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;

		margin-top: 16upx;
		margin: 30upx 30upx 0;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 4upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 4upx;
				color: $font-color-dark;
				margin-right: 4upx;
				font-weight: bold;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.update {
				color: #FF5E00;

			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 30upx;
		margin-top: 30upx;
		background: #fff;
		border-radius: 15upx;
		box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04);
		flex-direction: column;

		.name {
			color: #0B0E11;
			font-size: 28upx;
			margin-left: 10upx;
		}

		.eva-top {
			position: relative;
			display: flex;
			align-items: center;
		}

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.bom {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				flex-wrap: wrap;
			}

			.bot>image {
				width: 140upx;
				height: 140upx;
				border-radius: 8upx;
				margin: 0 40upx 30upx 0;
			}
		}
	}

	.store-area {
		display: flex;
		padding: 20upx 30upx;
		margin-top: 30upx;
		background: #fff;
		border-radius: 15upx;
		box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04);
		position: relative;

		.store-info {
			margin-left: 20upx;
			padding: 15upx 0 10upx;
		}

		image {
			width: 120upx;
			height: 120upx;
			border-radius: 8upx;

		}

		.attention {
			background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
			border-radius: 31upx;
			font-size: 24upx;
			color: #fff;
			display: inline-block;
			position: absolute;
			right: 30upx;
			padding: 6upx 14upx;
			top: 50%;
			transform: translateY(-50%);
		}

		.attention2 {
			border: 1px solid rgba(11, 14, 17, 1);
			border-radius: 31upx;
			font-size: 24upx;
			color: #0B0E11;
			display: inline-block;
			position: absolute;
			right: 30upx;
			padding: 6upx 14upx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		padding-bottom: 100upx;
		padding: 0 30upx;
		width: 100%;
		overflow: hidden;

		.d-header {
			display: flex;
			align-items: center;
			height: 80upx;
			font-size: 34upx;
			color: #0B0E11;
			position: relative;
			margin: 50rpx 0;
			font-weight: 700;
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.number {
			display: flex;
			justify-content: space-between;
			padding-left: 10upx;
			margin: 50upx 0;
			position: relative;
		}

		.font-back {
			position: relative;
		}

		.font-back:after {
			content: '';
			width: 100upx;
			height: 20upx;
			background: rgba(249, 202, 0, 1);
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}

		.number-right .reduce {
			width: 68upx;
			height: 53upx;
			background: rgba(245, 245, 250, 1);
			border-radius: 15upx;
			text-align: center;
			line-height: 53upx;
			font-size: 36upx;
			color: #0B0E11;
			display: inline-block;
			font-weight: bold;
			margin-right: 40upx;
		}

		.number-right .reduce.active {
			font-weight: 100;
			color: #999;
		}

		.number-right .add {
			width: 68upx;
			height: 53upx;
			background: rgba(245, 245, 250, 1);
			border-radius: 15upx;
			text-align: center;
			line-height: 53upx;
			font-size: 36upx;
			color: #0B0E11;
			display: inline-block;
			font-weight: bold;
			margin-left: 40upx;
		}

		.a-t {
			display: flex;

			.product {
				width: 200upx;
				height: 200upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 50%;
				border: 6rpx solid #fff;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;
				padding-top: 20rpx;

				.price {
					font-size: 36upx;
					color: #FE2130;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}
		.delete-img{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 8upx;
			color: #0B0E11;
			padding-top: 30upx;
			padding-left: 10upx;
			position: relative;

			.font-back {
				position: relative;
			}

			.font-back:after {
				content: '';
				width: 100upx;
				height: 20upx;
				background: rgba(249, 202, 0, 1);
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: -1;
			}
		}

		.item-list {
			padding: 40upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F5F5FA;
				margin-right: 60upx;
				margin-bottom: 20upx;
				border-radius: 20upx;
				min-width: 160upx;
				height: 54upx;
				padding: 0 20upx;
				font-size: 28upx;
				color: #0B0E11;
			}

			.selected {
				background: #F9CA00;
				color: #0B0E11;
			}

			.noneActive {
				background-color: #ccc;
				opacity: 0.4;
				color: #000;
				pointer-events: none;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 40upx 40upx 0px 0px;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: #FF5E00;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30rpx;
				flex: 1;

			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		/* box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5); */
		box-shadow:0px -10rpx 30rpx rgba(0,0,0,0.04);

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			image {
				width: 40upx;
				height: auto;
			}

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 70upx;

			overflow: hidden;

			margin-left: 20upx;
			position: relative;

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 100upx;
				background: linear-gradient(to right, #F9CA00, #FFA200);
				margin-right: 30upx;
			}
		}

		.add-cart-btn {
			background: linear-gradient(to right, #FF5E00, #FF2300) !important;
		}
	}

	/* 售空 */
	.sale-null {
		width: 100%;
		height: 90upx;
		background: linear-gradient(90deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		opacity: 0.7;
		text-align: center;
		line-height: 90upx;
		font-size: 30upx;
		color: #fff;
	}
</style>
